html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

@font-face {
    font-family: "MyriadPro-It";
    src: url("../fonts/MyriadPro-It.eot");
    src: url("../fonts/MyriadPro-It.eot?#iefix") format("embedded-opentype"), url("../fonts/MyriadPro-It.woff") format("woff"), url("../fonts/MyriadPro-It.ttf") format("truetype"), url("../fonts/MyriadPro-It.svg#MyriadPro-It") format("svg");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro-Bold.eot");
    src: url("../fonts/MyriadPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/MyriadPro-Bold.woff") format("woff"), url("../fonts/MyriadPro-Bold.ttf") format("truetype"), url("../fonts/MyriadPro-Bold.svg#MyriadPro-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro-Light.otf");
    src: url("../fonts/MyriadPro-Light.otf?#iefix") format("opentype");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro';
    src: url("../fonts/MyriadPro-Semibold.otf");
    src: url("../fonts/MyriadPro-Semibold.woff") format('woff');
    font-weight: 600;
    font-style: normal;
    }

@font-face {
    font-family: "MyriadPro";
    src: url("../fonts/MyriadPro-Regular.eot");
    src: url("../fonts/MyriadPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/MyriadPro-Regular.woff") format("woff"), url("../fonts/MyriadPro-Regular.ttf") format("truetype"), url("../fonts/MyriadPro-Regular.svg#MyriadPro-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
}

:root {
    --navy: #004587;
    --light-blue: #24B0E8;
    --white: #ffffff;
    --black: #000000;
    --lightest-gray: #F2F2F2;
    --light-gray: #E5E8ED;
    --dark-gray: #BBBBBB;
}

body {
    font-family: "MyriadPro", Arial, Helvetica, sans-serif !important;
}

/* ------------- show hide elements ------------- */ 
#Span1 { 
    display: none; 
}
#divCardType{
    display: none; 
}
#pagefoot{
    display: none; 
}
#BillingAddress .fieldsetTop .form-group:not(:nth-child(0n+2)) {
    display: none ;
}
#BillingAddress legend {
    display: none ;
}
#OrderDetails > legend, 
#OrderDetails #order-details-row {
    display: none;
}
#ctl00_content_LabelCVV {
    display: none;
}
#cvv-label-container br{
    display: none;
}
#creditor-address-row label br{
    display: none;
}
#divExplainSecurityCode{
    display: none;
}
/* ------------------------------------------------------- */ 


#pagecontainer {
    font-size: 16px;
}
#aspnetForm {  
    max-width: 400px;
    padding: 0 24px;
    background-color: var(--white);
    margin: 0 auto;
}
#pagefoot{
    max-width: 400px;
    padding: 20px 24px 10px 24px;
    background-color: var(--white);
    margin: 0 auto;
    text-align:center;
    font-weight: 100;
}
.form-group {
    padding: 0; 
    margin-bottom: 24px;
}
#divSecurityCode.form-group,
#ctl00_content_divSecurityCodeContainer.form-group {
    margin-bottom: 0;
}
label { 
	display: block;
	color: var(--black);
	margin-bottom: 8px;
    width: 100%; 
    font-weight: 600;
}
label u { 
	text-decoration: none;
}
input { 
    box-sizing: border-box;
    font-size:16px;
    font-family: "MyriadPro"; 
    font-weight: 100;
    width: 100%; 
    height:40px;
    padding: 0 16px;
    border-radius: 10px;
    border: solid 1px var(--white); 
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); /*  horizontal vertical blur radius colour */
    -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); /*  horizontal vertical blur radius colour */
}
/*input:focus { 
    outline: none;
}*/
select { 
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url(../images/arrow-down.png);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: 50%;
    background-size: 20px;
    box-sizing: border-box;
    width: 100%; 
    height:40px;
    padding: 0 16px;
    border-radius: 10px;
    border: solid 1px var(--white); 
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); 
    font-family: "MyriadPro"; 
    font-size:16px; 
    font-weight: 100;
}
/*input:focus { 
    outline: none;
}
select:focus { 
    outline: none;
}*/
legend span { 
    display: block;
    text-transform: uppercase;
    font-weight: 100;
    color: var(--navy);
    font-size:20px;
    letter-spacing:2px;
    margin: 20px 0;
}
#pagehead {
    background: var(--white) url("../images/eflow-background.svg") repeat-x;
    background-position: 0 50px;
    height: 150px;
}
#logo-container {
    max-width: 400px;  /*match main container width*/
    padding: 0 24px;
    margin: 0 auto;
}
#logo-container a{
    display:inline-block;
}
.eflow-logo{
    height: 48px;
    margin-top:0px;
    margin-left:-5px;
}
.payment-details-image{
    display:block;
    height: 42px;
    margin: 26px auto;
}

/* ------------- overwrites ------------- */ 
#divCountry select { width: 100%!important; }
#divsubmit #divSubmitContents {float: none;} 
#divDateExpiry select { display: inline-block;  width: 48%; }
label#ctl00_content_labelExpiryDateMonth {display: none;}
select#ctl00_content_dropdownlistExpiryMonth {margin-right: 2%;}
label#ctl00_content_labelExpiryDateYear {display:none;}
#SecurityCodeExplainLink { text-align: right; margin-right: 0;  margin-top:12px;}
#divExplainSecurityCode {text-align: right; margin: 4px 0; color: var(--navy); font-weight: 100;} 
#SecurityCodeExplainLink a,
#SecurityCodeExplainLink a:link,
#SecurityCodeExplainLink a:visited,
#SecurityCodeExplainLink a:active,
#SecurityCodeExplainLink a:focus {color: var(--navy); text-decoration:none; font-weight: 100;}
#divExplainSecurityCodeClose a,
#divExplainSecurityCodeClose a:link,
#divExplainSecurityCodeClose a:visited,
#divExplainSecurityCodeClose a:active,
#divExplainSecurityCodeClose a:focus {color: var(--navy); text-decoration:none; font-weight: bold; display:inline-block; margin-top:2px;}
#SecurityCodeExplainLink a:hover,
#divExplainSecurityCodeClose a:hover {color: var(--light-blue)}
#secure-3d-message {margin-bottom: 30px;}
#secure-3d-message p{color: var(--navy); font-weight: 100;}
#CreditorDetails label{ margin-bottom: 3px;}
#CreditorDetails p{ font-weight: 100; line-height: 150%;}
#PaymentDetails p.help-inlineblock{ font-weight: 100;}
#PaymentDetails legend {margin: 0 auto;}
#CreditorDetails legend { margin: 0 auto; }
#PaymentDetails legend span {margin-top:20px;}
#PaymentDetails legend span,
#CreditorDetails legend span {font-weight: 600;}


#CreditorDetails .form-group {margin-bottom:16px;}
#total-amount-row label {display: inline-block; width: 130px; font-size: 20px; font-weight: normal;}
#total-amount-row p {display: inline-block; font-size: 20px; font-weight: normal;}
#total-amount-row {margin-bottom:0; text-align: center;}


/* ------------- apple and google pay button  ------------- */ 
#divWalletContainer {
    margin-top: 2em;
}
 #googlePayWalletContainerId {
    display: inline-block !important;
    text-align:center;
}
#googlePayButtonContainerId, #divApplePayWalletContainer {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.apple-pay-button{padding:0px 30px 10px !important;}
#divPaymentMethodsGooglePayDivider, #divPaymentMethodsApplePayDivider {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

/* ------------- request by Turas to remove the 'OR' after payment type ------------- */
#divPaymentMethodsGooglePayDivider,
#divPaymentMethodsApplePayDivider {display: none !important;}
#divWalletContainer { margin: 10px 0 60px 0; }

/* ------------- request by Turas to swap the order of the name and card num fields ------------- */
#PaymentDetails .fieldsetTop {display: flex; flex-direction: column;}
#divCardNumber { order: -1; }

/* ------------- placeholder text ------------- */ 
#aspnetForm input::placeholder { color: var(--dark-gray);}
#aspnetForm input::-webkit-input-placeholder { color: var(--dark-gray);}
#aspnetForm input::-ms-input-placeholder { color: var(--dark-gray);}
#aspnetForm input:placeholder-shown {color: var(--dark-gray); font-family: "MyriadPro"; font-size:16px; font-weight: 100;}


/* ----- buttons ------------- */ 
input.btn-payzone { 
    font-family: "MyriadPro"; 
    font-size:16px; 
    font-weight: normal;
    border-radius: 50px;
    text-align: center;
    width: 100%;
    box-shadow: none;
    border: none;
}
input.btn-payzone:hover { 
    cursor:pointer;
    filter: brightness(88%);
}
#ctl00_content_btnMakePayment,
#ctl00_content_btnCreateMandate,
#ctl00_content_btnUpdate{
    background-color: var(--navy);
    color: white;
    margin-bottom:10px;
}
#ctl00_content_btnCancel{
    background-color: var(--light-gray);
    color: var(--navy);
}
#ctl00_content_btnCancel:hover{
    cursor:pointer;
    filter: brightness(94%);
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    #pagecontainer { background: linear-gradient( 180deg, var(--white) 20%, var(--lightest-gray) 30% );}
    .eflow-logo{ margin-left: -24px;} 
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}